<template>
  <div class="falling-petals">
    <div
      v-for="(petal, index) in petals"
      :key="index"
      class="petal"
      :style="petal.style"
    >
      <img src="@/assets/img/flower.png" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // backgroundImageUrl: {
    //   type: String,
    //   default: '../assets/img/bcSpring1.jpg',
    // },
  },
  data () {
    return {
      petals: [],
      numPetals: 4 // 花瓣数量
    };
  },
  mounted () {
    this.createPetals();
  },
  methods: {
    createPetals () {
      for (let i = 0; i < this.numPetals; i++) {
        this.petals.push(this.generatePetal());
      }
    },
    generatePetal () {
      const left = Math.random() * 100;
      const animationDuration = Math.random() * 10 + 5; // 随机动画时长
      return {
        style: {
          left: `${left}%`,
          animationDuration: `${animationDuration}s`,
        },
      };
    },
  },
};
</script>

<style>
.falling-petals {
  position: absolute;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: url('@/assets/img/bcSpring1.jpg') no-repeat;
  background-size: cover;
}

.petal {
  position: absolute;
  width: 60px;
  height: 60px;
  transform: translateY(-100%);
  animation: fall linear infinite;
}
img {
  width: 100%;
  height: 100%;
}
@keyframes fall {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100vh);
  }
}
</style>
